<template>
	<view class="content">
		<scroll-view class="itembox" scroll-y="true">
			<view v-for="(item, index) in datas" :key="index">
				<view class="completion">{{ item.question_type_name }}</view>
				<view class="long-line"></view>
				<view class="title-flex">
					<image class="title-bg blue" src="../../static/image/summary-blue.png"></image>
					<view class="first-title">第{{ index+1 }}题</view>
				</view>
				<view class="long-line2"></view>
				<view class="first-title-content">
					<rich-text :nodes="item.question_title"></rich-text>
				</view>
				<view v-show="item.is_sub_question == 1" class="title-flex">
					<image class="title-bg orange" src="../../static/image/summary-orange.png"></image>
					<view class="first-title">答案</view>
				</view>
				<view v-show="item.is_sub_question == 1" class="container-flex-row first-title-content answer1">
					<view class="answer">您的答案：</view>
					<view v-if="item.question_typeid == 11">
						<image class="yulanImg firstCanvas" mode="aspectFit" :src="item.myanswer" :style="{background:'url('+item.question_photo+') no-repeat'}"></image>
					</view>
					<view class="answer_content" v-else-if="item.is_bd == 1">
						<view class="answerimage" v-if="item.answer_img_list==null">没答题</view>
						<view v-else class="answerimage">
							<view @click="previewImage(imgitem,item.answer_img_list)" class="right_img" v-for="(imgitem, imgindex) in item.answer_img_list"
							 :key="imgindex" :style="{ backgroundImage: 'url(' + imgitem + ')' }"></view>
						</view>
					</view>
					<view v-else>{{ item.myanswer == '' ? '没答题' : item.myanswer }}</view>
				</view>
				<view v-show="item.is_sub_question == 1" class="container-flex-row answer2">
					<view class="answer">正确答案：</view>
					<rich-text :nodes="item.answer"></rich-text>
				</view>
				<view class="title-flex">
					<image class="title-bg red" src="../../static/image/summary-red.png"></image>
					<view class="first-title">解析</view>
				</view>
				<view class="first-title-content analysis">
					<rich-text :nodes="item.question_analysis"></rich-text>
				</view>
				<view v-if="item.is_sub_question == 2" class="checkSub" @click="checkSub(item.question_id)">查看子题</view>

				<view class="grey-bg"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import util from '../../common/util.js';
	export default {
		data() {
			return {
				package_log_id: '',
				resource_id: '',
				type: 1,
				question_id: '',
				datas: [],
				analy: [],
			}
		},
		onLoad(e) {
			this.package_log_id = e.package_log_id;
			this.resource_id = e.id;
			this.type = e.type;
			if (this.type == 1) {
				this.question_id = this.resource_id;
				this.getQues(1);
			} else {
				this.getIds();
			}
			this.getAnaly();
			uni.showLoading({
				title: '加载中'
			})
		},
		methods: {
			getAnaly() {
				var data = {
					package_log_id: this.package_log_id,
				}
				if (this.type == 1) {
					data.question_id = this.resource_id
				} else {
					data.eid = this.resource_id
				}
				this.$zapi.apiPost('user/package.user/getAnswerlog', data).then(res => {
					if (res.data.code == 200) {
						this.analy = res.data.data;
					} else {
						// uni.showToast({
						// 	title: res.data.msg,
						// 	icon: 'none'
						// })
					}
				});
			},
			getIds() {
				var data = {
					eid: this.resource_id,
					is_out_html: 2,
					is_get_answer: 2,
					allowable_tags: '<img>'
				}
				this.$zapi.apiPost('user/exam.Lists/examQuestion', data).then(res => {
					if (res.data.code == 200) {
						var arr = res.data.data.question_lists;
						var ids = [];
						for (var i = 0; i < arr.length; i++) {
							ids.push(arr[i].question_id);
						}
						this.question_id = ids.join(',');
						this.getQues(arr.length);
					}
				})
			},
			getQues(count) {
				var testData = {
					question_id: this.question_id,
					is_get_answer: 2,
					page: 1,
					pagesize: count
				};
				this.$zapi.apiPost('user/question.Lists/questionList', testData).then(res => {
					if (res.data.code == 200 && res.data.data.question_ids_count != 0) {
						let data = res.data.data.data;
						util.latex_reques(data, 'question_title'); //解析 试题标题 latex 公式转换
						util.latex_reques(data, 'question_analysis'); //解析 试题解析 latex 公式转换
						util.latex_answer(data, 'answer_list'); //解析答案选项 latex 公式转换
						for(var i = 0; i < data.length; i++) {
							data[i].interest_lists_log = [];
							if(data[i].is_sub_question == 2 && !data[i].answer_list) {
								data[i].answer_list = [];
							}
						}
						
						for (var i = 0; i < this.analy.length; i++) {
							for (var j = 0; j < data.length; j++) {
								if (data[j].is_sub_question == 1 && data[j].question_id == this.analy[i].question_id) {
									data[j].interest_lists_log[0] = this.analy[i];
								}
							}
						}
						var result = util.getAnalysis(data, 'interest_lists_log');
						this.datas = result;
						// if (res.data.data.f_question_string) {
						// 	this.getSubList(res.data.data.f_question_string);
						// }
						uni.hideLoading();
						this.$forceUpdate();
					}
				});
			},
			getSubList(parent_question_id) {
				if (parent_question_id != '') {
					var data = {
						parent_question_id: parent_question_id,
						is_get_answer: 2,
						is_out_html: 2,
						allowable_tags: '<img>'
					}
					this.$zapi.apiPost('user/question.Lists/questionSublist', data).then(res => {
						if (res.data.code == 200) {
							var redList = res.data.data;
							for (var i = 0; i < redList.length; i++) {
								var data = redList[i].question_sub_lists;
								util.latex_reques(data, 'question_title'); //解析 试题标题 latex 公式转换
								util.latex_reques(data, 'question_analysis'); //解析 试题解析 latex 公式转换
								util.latex_answer(data, 'answer_list'); //解析答案选项 latex 公式转换
								for(var i = 0; i < data.length; i++) {
									data[i].interest_lists_log = [];
								}
								for (var m = 0; m < this.analy.length; m++) {
									if(this.analy[m].question_id == redList[i].f_question_id) {
										for(var x = 0; x < this.analy[m].subqustion.length; x++) {
											for(var y = 0; y < data.length; y++) {
												if(this.analy[m].subqustion[x].question_id == data[y].question_id) {
													data[y].interest_lists_log[0] = this.analy[m].subqustion[x];
												}
											}
										}
									}
								}
								var result = util.getAnalysis(data, 'interest_lists_log');
								for (var j = 0; j < this.datas.length; j++) {
									if (this.datas[j].question_id == redList[i].f_question_id) {
										this.datas[j].subList = result;
										this.$forceUpdate();
									}
								}
							}
						}
						uni.hideLoading();
					});
				}
			},
			previewImage: function(url, urls) {
				uni.previewImage({
					current: url,
					urls: urls
				});
			},
			checkSub(question_id) {
				uni.navigateTo({
					url: 'allDetail?package_log_id=' + this.package_log_id + '&id=' + this.resource_id + '&type=' + this.type + '&question_id=' + question_id
				})
			}
		}
	}
</script>

<style lang="stylus">
	.img {
		display: block;
		max-width: 90%;
		margin: 0upx;

	}

	.img_base {
		display: block;
		max-height: 100px;
		height: 50px;
		padding: 0upx;
		/* margin: 0 auto; */
		/* margin-top: -20upx;
		margin-left: -45upx; */
	}

	html {
		font-size: 26upx;
	}

	.content {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.itembox {
		height: calc(100% - 0upx);
	}

	.completion {
		width: 750upx;
		height: 72upx;
		line-height: 72upx;
		text-align: center;
		color: #00adff;
		font-size: 32upx;
	}

	.long-line {
		width: 750upx;
		border-top: 1upx solid #e5e5e5;
	}

	.long-line2 {
		width: 710upx;
		border-top: 1upx solid #e5e5e5;
		margin: 10upx auto;
	}

	.title-flex {
		width: 750upx;
		height: 52upx;
		display: flex;
		justify-content: flex-start;
		margin-top: 20upx;
	}

	.title-bg {
		width: 142upx;
		height: 52upx;
	}

	.first-title {
		color: #ffffff;
		z-index: 99;
		margin-left: -112upx;
	}

	.small-title {
		font-size: 24upx;
		margin-top: 2upx;
	}

	.blue {
		box-shadow: -0.1rem 0.1rem 0.2rem rgba(0, 173, 255, 0.4);
	}

	.orange {
		box-shadow: -0.1rem 0.1rem 0.2rem rgba(255, 144, 0, 0.4);
	}

	.red {
		box-shadow: -0.1rem 0.1rem 0.2rem rgba(241, 0, 0, 0.4);
	}

	.lanse {
		box-shadow: -0.1rem 0.1rem 0.2rem rgba(0, 92, 220, 0.4);
	}

	.favorite {
		color: #666666;
		margin-left: 645upx;
		margin-top: -50upx;
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.favorite i {
		font-size: 45upx;
		line-height: 45upx;
	}

	/**
	 *点击收藏样式开始
	 */
	.active_favorite {
		color: #00adff;

		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.active_favorite i {
		font-size: 48upx;
		line-height: 45upx;
	}

	/**
	 */
	.square {
		font-size: 22upx;
		width: 32upx;
		height: 32upx;
		line-height: 32upx;
		border-radius: 6upx;
		color: #ffffff;
		text-align: center;
		margin-left: 20upx;
		margin-right: 12upx;
	}

	.red-square {
		background: #f10000;
	}

	.green_square {
		background: #00d555;
	}

	.red_square {
		background: red;
	}

	.container-flex-row {
		display: flex;
		flex-direction: row;
	}

	.container-flex-row1 {
		display: flex;
		flex-direction: row;
		margin-left: 30upx;
	}

	.item1 {
		color: #666666;
		align-items: center;
		margin-bottom: 10upx;
	}

	.first-title-content {
		font-size: 30upx;
		color: #333333;
		margin-top: 14upx;
		margin-left: 25upx;
	}

	.answer1 {
		color: #666666;
	}

	.answer2 {
		color: #00d555;
		margin-left: 25upx;
	}

	.answer {
		white-space: nowrap;
	}

	.yulanImg {
		/* width: 50%;
		height: 50%;
		margin-left: 25%;
		margin-top: 10%; */
		width: 540upx;
		height: 480upx;
		background-size: 100% 100% !important;
	}

	.analysis {
		color: #b0b0b0;
		padding-bottom: 60upx;
	}

	.knowledge {
		color: #666666;
		margin-bottom: 10upx;
	}

	.know2 {
		margin-left: 52upx;
	}

	.grey-bg {
		border-bottom: 20px solid #e5e5e5;
	}

	.dati-item {
		margin-left: 20upx;
	}

	/* 查看子题按钮 */
	.checkSub {
		font-size: 34upx;
		color: #00D5A2;
		margin: 40upx 30upx 0;
		padding-bottom: 20upx;
		text-align: right;
		font-weight: bold;
	}

	.answer_content {
		width: 75%;
		word-break: break-all;
		font-size: 32upx;
	}

	.answerimage {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

	}

	.right_img {
		position: relative;
		width: 21%;
		height: 0;
		overflow: hidden;
		margin: 0;
		margin-top: 15upx;
		margin-right: 15upx;
		padding-bottom: 150upx;
		/* 关键就在这里 */
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
</style>
